<template>
  <div class="task-details-flow">
    <van-steps direction="vertical" :active="0">
      <van-step v-for="(item,index) in stepsList" :key="index">
        <div class="steps-item-icon" slot="active-icon">
          <van-avatar height="80%" width="80%"
            radius="4px" alt=""
            :src="item.headImageUrl"
            :text="item.createUsername"
          />
          <!-- :style="{background: getOperationBakgroundColor(item.approvalType)}" -->
          <p class="steps-item-startIcon" >
            <!-- <van-icon :name="getOperationIconName(item.approvalType)" color="#ffffff" /> -->
            <i style="font-size:12px;opacity:1;z-index: 999;" :style="{color:getOperationBakgroundColor(item.approvalType)}"
            :class="['mobile-font' , getOperationIconName(item.approvalType) === 'success' ? 'icon-success' : 'icon-close']"></i>
          </p>
        </div>
        <div class="steps-item-icon" slot="inactive-icon">
          <van-avatar height="80%" width="80%"
            radius="4px" alt=""
            :src="item.headImageUrl"
            :text="item.createUsername"
          />
          <!-- :style="{background: getOperationBakgroundColor(item.approvalType)}" -->
          <p class="steps-item-startIcon" >
            <!-- <van-icon :name="getOperationIconName(item.approvalType)" color="#ffffff" /> -->
            <i style="font-size:12px;opacity:1;z-index: 999;" :style="{color:getOperationBakgroundColor(item.approvalType)}"
            :class="['mobile-font' , getOperationIconName(item.approvalType) === 'success' ? 'icon-success' : 'icon-close']"></i>
          </p>
        </div>
        <p class="step-title">{{item.createUsername}}</p>
        <div class="steps-item-desc">
          <div class="steps-item-desc-ctn">
            <p>{{item.taskName}}</p>
            <span class="steps-item-desc-ctn-time">{{item.createTime}}</span>
          </div>
          <div class="steps-item-desc-operation" v-if="item.taskComment">
            <!-- <span>{{SysFlowTaskOperationType.getValue(item.approvalType)}}</span> -->
            <!-- <span v-if="item.delegateAssignee">{{ item.delegateAssignee}}</span> -->
            <span>{{ item.taskComment }}</span>
          </div>
        </div>
      </van-step>
    </van-steps>
  </div>
</template>

<script>
import { FlowOperationController } from '@/api/flowController.js';

export default {
  props: {
    processInstanceId: {
      type: String
    }
  },
  data () {
    return {
      stepsList: []
    }
  },
  mounted () {
    this.getTaskFlowList()
  },
  methods: {
    getTaskFlowList () {
      FlowOperationController.listFlowTaskComment(this, {
        processInstanceId: this.processInstanceId
      }).then(res => {
        this.stepsList = res.data;
        for (let item of this.stepsList) {
          console.log(item)
          item.headImageUrl = this.getHeadImageUrl(item);
          // console.log(item.headImageUrl)
        }
      }).catch(e => { });
    },
    getOperationTagType (type) {
      switch (type) {
        case this.SysFlowTaskOperationType.AGREE:
        case this.SysFlowTaskOperationType.MULTI_AGREE:
        case this.SysFlowTaskOperationType.SET_ASSIGNEE:
          return 'success';
        case this.SysFlowTaskOperationType.REFUSE:
        case this.SysFlowTaskOperationType.PARALLEL_REFUSE:
        case this.SysFlowTaskOperationType.MULTI_REFUSE:
          return 'warning';
        case this.SysFlowTaskOperationType.STOP:
        case this.SysFlowTaskOperationType.REJECT:
        case this.SysFlowTaskOperationType.REJECT_TO_START:
        case this.SysFlowTaskOperationType.REJECT_TO_TASK:
        case this.SysFlowTaskOperationType.REVOKE:
          return 'danger';
        default:
          return 'primary';
      }
    },
    getOperationBakgroundColor (type) {
      let temp = this.getOperationTagType(type);
      switch (temp) {
        case 'success': return '#00B042';
        case 'danger': return '#EE0A24';
        default: return '#FF976A';
      }
    },
    getOperationIconName (type) {
      let temp = this.getOperationTagType(type);
      switch (temp) {
        case 'success': return 'success';
        case 'danger': return 'cross';
        default: return 'fail';
      }
    }
  }
}
</script>

<style scoped>
.task-details-flow {
  width: calc(100% - 52px);
  margin: 0 auto;
  margin-top: 16px;
  height: calc(100vh - 260px);
  padding: 10px;
  background-color: #ffffff;
  border-radius: 8px;
  overflow-y: scroll;
}
.steps-item-icon {
  /* margin-top: 5px; */
  width: 42px;
  height: 42px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  position: relative;
}
.steps-item-startIcon{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  bottom: -1px;
  left: calc(100% - 15px);
  border: 2px solid #ffffff;
  background: #ffffff;
}
.step-title {
  margin-left: 15px;
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}
.steps-item-desc {
  margin-left: 15px;
}
.steps-item-desc-ctn {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
}
.steps-item-desc-ctn p {
  font-size: 12px;
  color: #999999;
  font-weight: 400;
}
.steps-item-desc-ctn-time {
  font-size: 12px;
  color: #999999;
}
.steps-item-desc-operation{
  width: 100%;
  margin: 5px 0;
  padding: 0 5px;
  background: #F6F7F9;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.steps-item-desc-operation span {
  width: 100%;
  font-size: 14px;
  color: #666666;
  font-weight: 400;
  padding: 5px;
  overflow-wrap: break-word;
}
/* 去掉每个step之间的间隔线 */
.task-details-flow /deep/ .van-step--vertical:not(:last-child)::after {
  border-bottom-width: 0px!important;
}
/* 修改竖线为虚线 */
.task-details-flow /deep/ .van-step--vertical .van-step__line {
  width: 0px!important;
  border-left: 1px dashed #C1C2C4;
}
/* 去掉最后一个step的竖线 */
.task-details-flow /deep/ .van-steps__items .van-step:last-of-type .van-step__line {
  border: none!important;
}
</style>>
